<template>
  <a-result status="403" sub-title="你没有进入该页面的权限。" title="403">
    <template #extra>
      <p style="color: rgba(0, 0, 0, 0.45)">将在 {{ countDownTime }} 秒后自动跳到登录页</p>
      <div class="flex justify-center">
        <a-button type="primary" class="mx-4" @click="logout">返回登录页</a-button>
        <a-button type="primary" class="mx-4" @click="goBack">返回上一页</a-button>
      </div>
    </template>
  </a-result>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import router from '@/router'
import { useUserStore } from '@/store/modules/user'
import { ROUTER_NAME } from '@/constant'
const countDownTime = ref(3)

const countDown = setInterval(() => {
  if (countDownTime.value <= 0) {
    clearInterval(countDown)
    logout()
  } else {
    countDownTime.value = countDownTime.value - 1
  }
}, 1000)

const goBack = () => {
  clearInterval(countDown)
  router.back()
}
const userStore = useUserStore()
const logout = () => {
  localStorage.clear()
  userStore.logout()
  router.push({
    name: ROUTER_NAME.PAGE_LOGIN
  })
}
</script>
